<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>构建地图</title>		
		<script src="http://cdn.robotwebtools.org/EaselJS/current/easeljs.min.js"></script>
		<script src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
		<script src="http://cdn.robotwebtools.org/roslibjs/current/roslib.js"></script>
		<script src="http://cdn.robotwebtools.org/ros2djs/current/ros2d.js"></script>
		<script src="js/map/nav2d.js"></script>
		<script src="js/map/keyboardteleop.js"></script>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="jquery-ui-1.12.1/jquery-ui.js"></script>
		<script>
 			/**
		   	* Setup all visualization elements when the page is loaded. 
	  	 	*/
	  	 	var wsurl = getQueryString('url');
		  	function init() {
	    		// Connect to ROS.
		    	var ros = new ROSLIB.Ros({
		      		url : wsurl
		    	});
		
		    	// Create the main viewer.
		    	var viewer = new ROS2D.Viewer({
		      		divID : 'nav',
		      		width : 350,
		      		height : 400
	    		});
		
		    	// Setup the nav client.
		    	var nav = NAV2D.OccupancyGridClientNav({
		      		ros : ros,
		      		rootObject : viewer.scene,
		      		viewer : viewer,
		      		serverName : '/pr2_move_base'
		    	});
		    	
		    	 // Initialize the teleop.
		        var teleop = new KEYBOARDTELEOP.Teleop({
		          ros : ros,
		          topic : '/cmd_vel'
		        });

		        // Create a UI slider using JQuery UI.
		        $('#speed-slider').slider({
		          range : 'min',
		          min : 0,
		          max : 100,
		          value : 90,
		          slide : function(event, ui) {
		            // Change the speed label.
		            $('#speed-label').html('Speed: ' + ui.value + '%');
		            // Scale the speed.
		            teleop.scale = (ui.value / 100.0);
		          }
		        });

		        // Set the initial speed .
		        $('#speed-label').html('Speed: ' + ($('#speed-slider').slider('value')) + '%');
		        teleop.scale = ($('#speed-slider').slider('value') / 100.0);
				
				var cmdVel = new ROSLIB.Topic({
					ros : ros,
					name : '/cmd_vel',
					messageType : 'geometry_msgs/Twist'
				});
				  
				var up = new ROSLIB.Message({
					linear : {
						x : 0.45,
						y : 0.0,
						z : 0.0
					},
					angular : {
						x : 0.0,
						y : 0.0,
						z : 0.0
					}
				});
				
				var down = new ROSLIB.Message({
					linear : {
						x : -0.45,
						y : 0.0,
						z : 0.0
					},
					angular : {
						x : 0.0,
						y : 0.0,
						z : 0.0
					}
				});
				
				var left = new ROSLIB.Message({
					linear : {
						x : 0.0,
						y : 0.0,
						z : 0.9
					},
					angular : {
						x : 0.0,
						y : 0.0,
						z : 0.9
					}
				});
				
				var right = new ROSLIB.Message({
					linear : {
						x : 0.0,
						y : 0.0,
						z : -0.9
					},
					angular : {
						x : 0.0,
						y : 0.0,
						z : -0.9
					}
				});
				
				var stop = new ROSLIB.Message({
					linear : {
						x : 0.0,
						y : 0.0,
						z : 0.0
					},
					angular : {
						x : 0.0,
						y : 0.0,
						z : 0.0
					}
				});
				var interval;
				$('#up').mousedown(function(){				
					interval = setInterval(function(){
						cmdVel.publish(up)
					},1000)
				})
				$('#up').mouseup(function(){
					cmdVel.publish(stop)				
					clearInterval(interval);
				})
				$('#down').mousedown(function(){				
					interval = setInterval(function(){
						cmdVel.publish(down)
					},1000)
				})
				$('#down').mouseup(function(){
					cmdVel.publish(stop)				
					clearInterval(interval);
				})
				$('#left').mousedown(function(){				
					interval = setInterval(function(){
						cmdVel.publish(left)
					},1000)
				})
				$('#left').mouseup(function(){
					cmdVel.publish(stop)				
					clearInterval(interval);
				})
				$('#right').mousedown(function(){				
					interval = setInterval(function(){
						cmdVel.publish(right)
					},1000)
				})
				$('#right').mouseup(function(){
					cmdVel.publish(stop)				
					clearInterval(interval);
				})
		  	}
		  	function getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) {
				    return (r[2]);
				}
				return null;
			}
			
			/*$(document).keydown(function(event){
				alert(event.keyCode);//弹出按键的对应值 
			});*/
		</script>
		<style>
			button{margin:0; padding:0; list-style-type:none;background:none;border: none;} 
		</style>
	</head>
	<body onload="init()">
		<section id="nav"></section>
		<section id="camera">
			<p>摄像头图像</p>
		</section>
		<section id="location">
			<p>设置定位点</p>
		</section>
		<section id="handle">
			<p>遥控手柄<---></p>
			<div id="speed-label"></div>
			<div id="speed-slider"></div>
			<div>
				<button id="up"><img src="images/up.png"></button>
				<button id="left"><img src="images/left.png"></button>
				<button id="right"><img src="images/right.png"></button>
				<button id="down"><img src="images/down.png"></button>
			</div>
		</section>
	</body>
</html>
